<template>
	<header>
		<div @click='goBack'>
			<i class='iconfont icon-fanhui'></i>
		</div>
		<form onsubmit="return false" action="" class='search-input' @keyup.enter='goSearchList'>
			<input type="search" placeholder="搜索商品名称" v-model='inputVal'>
		</form>
		<div @click='goSearchList'>
			<i class='iconfont icon-fangdajing'></i>
		</div>
	</header>
</template>

<script>
export default{
	props:{
		queryKey:String
	},
	data () {
		return {
			inputVal:this.queryKey,
			searchArr:[]
		}
	},
	methods:{
		//返回上一页
		goBack(){
			this.$router.back();
		},
		//搜索事件 
		goSearchList(){
			
			//没有搜索的值，就直接返回，不进行搜索
			if( !this.inputVal ) return;
			
			//判断之前有没有本地存储
			if(  !localStorage.getItem('serachList') ){
				//没有
				localStorage.setItem('serachList','[]');
			}else{
				//之前有
				this.searchArr = JSON.parse( localStorage.getItem('serachList')   );
			}
			
			//增加数据
			this.searchArr.unshift( this.inputVal );
			
			//ES6去重
			let obj = new Set( this.searchArr );

			//给本地存储赋值
			localStorage.setItem('serachList',JSON.stringify(Array.from(obj)));
			
			//跳转页面
			this.$router.push({
				path:'/search-list',
				query:{
					key:this.inputVal
				}
			})
			
			this.inputVal = '';
			
		}
	}
}
</script>

<style scoped lang='scss'>
header{
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 48px;
	background-color: #f7f7f7;
	.search-input{
		width: 80%;
		background-color: #fff;
		input{
			padding-left:20px;
		}
	}
}
</style>
